<template>
	<view class="Register_content">
		<view class="register_box major_box">
			<view class="register_title">
				<image src="../../static/image/major_back_icon.png" @tap="back"></image>
				<text  :style="i18n.registertitlestyle">{{i18n.zyyhtitle}}</text>
			</view>
			<view class="input_content" :style="i18n.yjyhzcimg1"><input type="email" v-model="email" placeholder-class="placeholder" :placeholder="i18n.zyyhpl1"/></view>
			<!-- <view class="input_content"><input type="number" v-model="phone" placeholder-class="placeholder" placeholder="请输入手机号码"/></view> -->
			 <view class="Verification_Code">
				<view class="vcode_input" :style="i18n.majorcodeimg"><input type="text" v-model="vcode" placeholder-class="placeholder" :placeholder="i18n.input_placeholder2" /></view>
				<text @tap="send_vcode" v-if="sendVode">{{i18n.send_vcode}}</text>
				<text v-else>{{vtext}}</text>
			</view>
			
			<view class="child_account">
				<view class="input_content account_name" :style="i18n.yjyhzcimg2">
					<input style="color: #FFFFFF;" type="text" v-model="accountName" placeholder-class="placeholder" :placeholder="i18n.zyyhpl2"/>
				</view>
				<!-- <image src="../../static/image/question_icon.png" class="question_icon"></image> -->
			</view>
			
			<view class="input_content pad_input password_style" :style="i18n.yjyhzcimg3">
				<input :type="eye?'text':'password'" v-model="password" placeholder-class="placeholder" :placeholder="i18n.zyyhpl3"/>
				<image
				:src="eye?'../../static/image/openeye_green.png':'../../static/image/closeeye_green.png'" 
				@tap="chageEye(1)"
				class="eyes"></image>
			</view>
			<view class="input_content confirm_pwd password_style" :style="i18n.yjyhzcimg4">
				<input :type="eye2?'text':'password'" v-model="password2" placeholder-class="placeholder" :placeholder="i18n.zyyhpl4"/>
				<image
				:src="eye2?'../../static/image/openeye_green.png':'../../static/image/closeeye_green.png'" 
				@tap="chageEye(2)"
				class="eyes"></image>
			</view>
			<view class="input_content" :style="i18n.yjyhzcimg5"><input  :placeholder="i18n.zyyhpl5" placeholder-class="placeHolder" placeholder-style="color:rgba(255,255,255,0.3)" v-model="fathercode" type="number" maxlength="5"  /></view>
			<view class="agreement" @tap="agree_ruls">
				<image :src="agree ? '../../static/image/xieyi_select.png' : '../../static/image/xieyi_icon.png' "></image>
			<!-- 	<image src="../../static/image/xieyi_icon.png"></image> -->
				<view class="agreement_text">
           {{i18n.agreement_text1}}
           		<text @tap="agreementClick">{{i18n.agreement_text2}} </text>
       </view>
			</view> 
			
			<image :src="changeColor?i18n.changeColorbg1:i18n.changeColorbg2" class="register_btn" @tap="register"></image>
			
			<view class="login_entry" @tap="login">{{i18n.zjdl}}？</view>
		</view>
			<moveble-view :movebleView="movebleViewStyle" :angle="a" @verification="changeVerification"></moveble-view>
	</view>
</template>

<script>
	import Files from '../../common/files.js'
	import EthCrypto from 'eth-crypto';
	import CryptoJS from 'crypto-js';
	import movebleView from '../../components/moveble-view/movable-view.vue';
	export default {
		data() {
			return {
				//phone:"",
				email:"",
				vcode:"",
				accountName:"",
				password:"",
				password2:"",
				InvitationCode:"",
				sendVode:true,
				//vtext:"发送验证码",
				vtext: this._i18n.locale == 'zh_CN' ? '发送验证码':'Send verification code',
				agree:false,
				Wallet:"",
				changeColor:false,
				eye:false,
				eye2:false,
				fathercode:"",
				apptoken:"",
				rcode:"",
				jwd:"",
				//验证框显示
				allSliderStyleText: "display:none",
				rotationAngleText: "",
				a: "",
				movebleViewStyle: "display:none",
				verificationData: "",
				run:false
			}
		},
		components: {
			movebleView
		},
		onLoad() {
			this.Wallet = this.$store.getters.getWallet;
			console.log(this.Wallet)
			this.getAppToken();
			this.getRecod();
			var _this=this
			uni.request({
				url:this.$API.appServeApi + this.$API.geticode + '?i18n_language=' + uni.getStorageSync('system_info'),
				method:'GET',
				success(res) {
					if(res.statusCode==200){
						console.log(res)
						if(res.data.data){
						console.log(res.data.data.icode)
						_this.fathercode=res.data.data.icode 
						}
					}
				},
				fail() {
					_this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? 'apptoken 请求失败':'Apptoken request failed')
				}
			})
			// plus.geolocation.getCurrentPosition(function(p) { //获取用户设备位置
			// 	console.log(p)
			// 	var dz = p.coords.latitude + ''
			// 	var dz2 = p.coords.longitude + ""
			// 	let latitude = dz.split(".")[0]
			// 	let longitude = dz2.split(".")[0]
			// 	_this.jwd = latitude + ':' + longitude
			// 	console.log(_this.jwd)
			// 	// uni.setStorage("jwd",jwd) 
			// 	// console.log(uni.getStorage("jwd"))
			// }, function(e) {
			// 	// alert('Geolocation error: ' + e.message);
			// 	console.log(e)
			// })
			uni.getLocation({
			    type: 'wgs84',
			    success: function (res) {
			        console.log('当前位置的经度：' + res.longitude);
			        console.log('当前位置的纬度：' + res.latitude);
												var dz =  res.latitude + ''
												var dz2 = res.longitude+ ""
												let latitude = dz.split(".")[0]
												let longitude = dz2.split(".")[0]
												_this.jwd = latitude + ':' + longitude
											
			    }
			});
		},
		onShow() {
			var _this = this
			_this.changeVerification()
			if (_this.verificationData) {
				_this.register()
			}
		},
		computed: {
			changeData() {
				const {email,accountName, password,password2,fathercode,agree} = this
				return {
					email,accountName,password,password2,fathercode,agree
				}
			},
			i18n() {
				return this.$t('user')
			}
		},
		watch: {
			changeData: {
				handler: function (newval, oldval) {
					//this.phone = newval.phone;
					this.email = newval.email;
					this.accountName = newval.accountName;
					this.password = newval.password;
					this.password2 = newval.password2;
					this.agree = newval.agree;
					if(this.email != ""  && this.accountName != "" && this.password != "" && this.password2 != "" && this.agree){
						this.changeColor = true
					}else{
						this.changeColor = false
					}
				},
				deep: true
			}
		},
		methods: {
			getAppToken(){
				const localApptoken = uni.getStorageSync('apptoken');
				const _this = this;
				if(!localApptoken){
					uni.request({
						url:this.$API.appServeApi + this.$API.apptoken + '?i18n_language=' + uni.getStorageSync('system_info'),
						method:'GET',
						success(apptokenInfo) {
							console.log(apptokenInfo)
							if(apptokenInfo.data.code == 200){
								_this.apptoken = apptokenInfo.data.data
								uni.setStorageSync('apptoken', apptokenInfo.data.data)
							}else{
								_this.$CommonJS.showToast(apptokenInfo.data.message)
							}
						},
						fail() {
							_this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? 'apptoken 请求失败':'Apptoken request failed')
						}
					})
				}else{
					_this.apptoken = localApptoken;
				}
			},
			getRecod(){
				const _this = this;
				uni.request({
					url:this.$API.appServeApi + this.$API.rcode + '?i18n_language=' + uni.getStorageSync('system_info'),
					success(recodeInfo) {
						if(recodeInfo.data.code == 200){
							_this.rcode = recodeInfo.data.data
						}else{
							_this.$CommonJS.showToast(recodeInfo.data.message)
						}
					},
					fail(err) {
						_this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? 'recode 请求失败':'Recode request failed')
					}
				})
			},
			chageEye(n){
				if(n == 1){
					this.eye = !this.eye;
				}else{
					this.eye2 = !this.eye2;
				}
				
			},
			back(){
				this.$CommonJS.navigateBack()
			},
			agree_ruls(){
				//同意协议
				this.agree = !this.agree;
			},
			agreementClick(){
				this.$CommonJS.navigateTo('../agreementClick/agreementClick')
			},
			send_vcode(){
				//发送验证码
				const _this = this;
				// if(!this.phone){
				// 	this.$CommonJS.showToast("请输入手机号");
				// 	return;
				// }
				// if(!this.$CommonJS.PhoneValidate(this.phone)){
				// 	this.$CommonJS.showToast("手机号不正确");
				// 	return;
				// }
				if(this.email == ""){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '邮箱不能为空':'The mailbox cannot be empty');
					return;
				}
				
						uni.showLoading({
							
						})
				const url = this.$API.appServeApi + this.$API.phoneValidate + '?i18n_language=' + uni.getStorageSync('system_info') + "&mobile=" + this.email+"&rtype=1"+"&codetype=0";
				this.$CommonJS.request(url,"POST").then(res => {
					if(res.data.code==200){
						uni.hideLoading()
							_this.$CommonJS.showToast("验证码已发送")
							_this.getTime();
					}
						uni.hideLoading()
					_this.$CommonJS.showToast(res.data.message)
				}).catch(error => {
					//console.log(error)
					_this.$CommonJS.showToast(error. message)
						uni.hideLoading()
				})
			},
			getTime(){
				//倒计时
				var _this = this;
				
				var num = 60;
			  var timer =	 setInterval(function(){
					if(num <= 0){
						clearInterval(timer);
						_this.vtext = "";
						_this.sendVode = true;
						return;
					}
					
					_this.vtext = '重新发送' + num + 's';
					
					num --;
				},1000)
				_this.sendVode = !_this.sendVode;
			},
			register(){
				const _this = this;
				
				/*if(this.phone == ""){
					this.$CommonJS.showToast("手机号不能为空");
					return;
				}
				
				if(!(/^1[3456789]\d{9}$/.test(this.phone))){
					this.$CommonJS.showToast("手机号码有误，请重填");
					return; 
				} */
				
				
				if(!this.vcode){
					this.$CommonJS.showToast("请输入验证码");
					return;
				}
				
				if(this.email == ""){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '邮箱不能为空':'The mailbox cannot be empty');
					return;
				}
				var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
				if(!reg.test(this.email)){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '邮箱格式不正确':'The mailbox format is incorrect');
					return; 
				} 
				
				if(!this.accountName){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '请输账户名':'Please input account name');
					return;
				}
				
				if(!this.$CommonJS.accountValidate(this.accountName,1)){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '账户名字母开头，12到16位数字字母组合':'Letter start, 12 to 16 digit alphanumeric combination');
					return;
				}
				if(!this.password){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '请输入密码':'Please input a password');
					return;
				}
				
				if(!this.$CommonJS.passwordValidate(this.password)){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '密码请输入8-16位数字字母组合':'Please input 8-16 digit alphanumeric combination for password');
					return;
				}
				if(!this.password2){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '请输入确认密码':'Please enter the confirmation password');
					return;
				}
				if(this.password !== this.password2){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '两次输入的密码不一致':'The two passwords are not the same');
					return;
				}
				
				
				if(this.fathercode.length!=5&&this.fathercode){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '邀请码格式不正确':'Invitation code format is incorrect');
					return; 
					}

				if(!this.agree){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '未同意用户协议':'User agreement not agreed');
					return;
				}
				if(this.apptoken == ""){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? 'apptoken 不能为空':'Apptoken cannot be empty');
					return;
				}
				if(this.rcode == ""){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? 'recode 不能为空':'Recode cannot be empty');
					return;
				}
				if (_this.run==true){
					_this.movebleViewStyle = "display:none"
				//请求接口，传参子账号注册信息
				uni.showLoading({
					// title:"正在注册"
					title:_this._i18n.locale == 'zh_CN' ? '正在注册':'Registering',
				})
		
				const url = this.$API.appServeApi + this.$API.registerXiaoBai + '?i18n_language=' + uni.getStorageSync('system_info');
				var key = CryptoJS.enc.Utf8.parse("QWERTYHUJKOLL34C");
				var srcs = CryptoJS.enc.Utf8.parse(_this.accountName);
				var encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
				_this.rcode=encrypted.toString()
				const data = {
								account : this.accountName,
								mobile:this.email,
								valcode:this.vcode,
								publickey:this.Wallet.publicKey,
								isfather:1,
								apptoken:this.apptoken,
								rcode:this.rcode,
								fathercode:this.fathercode,
									jwd: _this.jwd

							}
							console.log(data)
				uni.request({
					url:url,
					method:"POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					data:data,
					success(res) {
						
						console.log(res)
						if(res.data.code == 200){
						
							//加密
							//对称加密
							var ciphertext = CryptoJS.AES.encrypt(JSON.stringify(_this.Wallet), _this.password).toString();
							const zhuanye = _this.accountName + '.txt';
							//	写入文件
							Files.fileWriter(ciphertext,zhuanye).then(txt =>{
								console.log(txt)
								if(txt.status == 200){
									uni.hideLoading();
									uni.showToast({
										// title:"注册成功",
										title:_this._i18n.locale == 'zh_CN' ? '注册成功':'login was successful',
										success() {
											_this.$CommonJS.navigateTo('../login/login')
										}
									})
								}
								
							}).catch(err =>{
								console.log(err)
								_this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? 'keystore 保存失败':'Keystore save failed')
							})
							
							
						}else{
							uni.hideLoading();
							_this.$CommonJS.showToast(res.data.message);
						}
					},fail(error) {
						uni.hideLoading();
						console.log(error)
						_this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '注册请求失败':'Registration request failed')
					}
				})
				} else { //显示滑块验证框
					_this.movebleViewStyle = "display:block"
				}
			},
			login(){
				this.$CommonJS.navigateTo("../login/login")
			},
			changeVerification(data) { //子组件传递过来的值
				var _this = this
				if (data) {
					_this.movebleViewStyle = data
					_this.run=true
				 _this.register()
					
				}
			},
		},
	}
</script>

<style lang="stylus">
	@import "../../static/stylus/register/xiaobai_user.stylus"
	.input_content input,.vcode_input input
		color #FFFFFF
		
	.placeholder
		font-size 12px
		color rgba(255,255,255,0.3)
		text-align right
		
	
</style>
